﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
    <TITLE>查看报价书</TITLE>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <LINK href="../js/style.css" rel=stylesheet>
    <style>
        /* 添加滚动条的样式 */
        body {
            overflow-y: scroll; /* 允许垂直滚动 */
            height: 100%;
        }

        #app {
            overflow-y: auto; /* 允许在 #app 中滚动 */
            max-height: 100vh; /* 确保内容区域的高度最大不超过视口高度 */
        }
    </style>
</HEAD>
<BODY>
<DIV id=overDiv style="Z-INDEX: 1; POSITION: absolute"></DIV>
<CENTER>
    <DIV id="app">
        <FORM name=form action="" method=post>
            <H2><FONT color=#0070c0>查看供应商报价明细</FONT></H2>
            <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE cellSpacing=1 cellPadding=3 width="100%" border=1>
                            <TBODY>
                            <TR bgColor=#ffffff>
                                <TD colspan="6" align=center height=30><B><FONT color=#0070c0>查看供应商报价明细</FONT></B></TD>
                            </TR>
                            <TR class=t2>
                                <TD>报价单位</TD>
                                <TD><FONT color=green>{{ quote.supplierName }}</FONT></TD>
                                <TD>询价单位</TD>
                                <TD>{{ enquiry.company }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD>地址</TD>
                                <TD>{{ quote.supplierAddress }}</TD>
                                <TD>地址</TD>
                                <TD>{{ enquiry.address }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD>联系人</TD>
                                <TD>{{ quote.supplierContact }}</TD>
                                <TD>联系人</TD>
                                <TD>{{ enquiry.contactPerson }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD>电话</TD>
                                <TD>{{ quote.supplierPhone }}</TD>
                                <TD>电话</TD>
                                <TD>{{ enquiry.phone }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD>传真</TD>
                                <TD>{{ quote.supplierFax }}</TD>
                                <TD>传真</TD>
                                <TD>{{ enquiry.fax }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD>E_mail</TD>
                                <TD>{{ quote.supplierEmail }}</TD>
                                <TD>E_mail</TD>
                                <TD>{{ enquiry.email }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD>报价时间</TD>
                                <TD>{{ formatDateTime(quote.quoteTime) }}</TD>
                                <TD>询价时间</TD>
                                <TD>{{ formatDateTime(enquiry.enquiryTime) }}</TD>
                            </TR>
                            <TR bgColor=#ffffff>
                                <TD colspan="6" align=center height=22><CENTER>供应商对本公司的<FONT color=#9933FF>"{{ enquiry.enquiryNo }}"</FONT>询价书具体报价情况如下：</CENTER></TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
            <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0 v-for="(demand, index) in demandList" :key="index">
                            <TBODY>
                            <TR>
                                <TD>
                                    <TABLE cellSpacing="1" cellPadding="3" width="100%" border="1">
                                        <TBODY>
                                        <TR>
                                            <TD colspan="6" align="middle" bgColor="#99ccff">
                                                <B>需求计划{{ index + 1 }}</B>
                                            </TD>
                                        </TR>
                                        <TR class="t2">
                                            <TD>物资编码</TD>
                                            <TD>{{ demand.MATERIAL_CODE }}</TD>
                                            <TD>物资名称</TD>
                                            <TD>{{ demand.MATERIAL_NAME }}</TD>
                                            <TD></TD>
                                            <TD></TD>
                                        </TR>
                                        <TR class="t2">
                                            <TD>计量单位</TD>
                                            <TD>{{ demand.MEASURE_UNIT }}</TD>
                                            <TD>开始到货期</TD>
                                            <TD>{{ formatDate(demand.START_DATE) }}</TD>
                                            <TD>结束到货期</TD>
                                            <TD>{{ formatDate(demand.END_DATE) }}</TD>
                                        </TR>
                                        <TR bgColor="#ffffff">
                                            <TD nowrap>单价(元/含税)</TD>
                                            <TD nowrap>{{ demand.UNIT_PRICE }}</TD>
                                            <TD nowrap>数量</TD>
                                            <TD nowrap>{{ demand.AMOUNT }}</TD>
                                            <TD nowrap>总价(元/含税)</TD>
                                            <TD nowrap>{{ demand.TOTAL_PRICE }}</TD>
                                        </TR>
                                        <TR bgColor="#ffffff">
                                            <TD nowrap>运杂费(元/含税)</TD>
                                            <TD nowrap>{{ demand.MIX_PRICE }}</TD>
                                            <TD nowrap>其他(元/含税)</TD>
                                            <TD nowrap>{{ demand.OTHER_PRICE }}</TD>
                                            <TD nowrap>总计(元/含税)</TD>
                                            <TD nowrap>{{ demand.SUM_PRICE }}</TD>
                                        </TR>
                                        </TBODY>
                                    </TABLE>
                                </TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>

            <TABLE style="LINE-HEIGHT: 30px" cellSpacing=1 cellPadding=0 width="100%" bgColor=#336699 borderColorLight=#006699 border=0>
                <TBODY>
                <TR>
                    <TD>
                        <TABLE cellSpacing=1 cellPadding=3 width="100%" border=1>
                            <TBODY>
                            <TR class=t2>
                                <TD nowrap>数量合计</TD>
                                <TD>{{ Quantity }}</TD>
                                <TD nowrap width="20%">总金额(元/含税)</TD>
                                <TD>{{ moneySum }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD nowrap>报价书标题</TD>
                                <TD>{{ quoteNum }}</TD>
                                <TD nowrap>报价有效期</TD>
                                <TD>{{ formatDate(queDate) }}</TD>
                            </TR>
                            <TR class=t2>
                                <TD nowrap>报价说明</TD>
                                <TD colspan="3" style="width:100%"><TEXTAREA readonly rows=4 style="width:100%">{{ quoRemark }}</TEXTAREA></TD>
                            </TR>
                            </TBODY>
                        </TABLE>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>

            <CENTER>
                <INPUT type=button value=返回 onclick="window.history.back()">
            </CENTER>
        </FORM>
    </DIV>
</CENTER>
</BODY>
<SCRIPT>
    new Vue({
        el: '#app',
        data() {
            return {
                Quantity: 0,
                moneySum: 0,
                enquireId: '',
                quoteNum: '',
                queDate: '',
                quoRemark: '',
                quote: {
                    supplierName: '',
                    supplierAddress: '',
                    supplierContact: '',
                    supplierPhone: '',
                    supplierFax: '',
                    supplierEmail: '',
                    quoteTime: '',
                },
                enquiry: {
                    company: '',
                    address: '',
                    contactPerson: '',
                    phone: '',
                    fax: '',
                    email: '',
                    enquiryTime: '',
                    enquiryNo: '',
                },
                demandList: [],
            };
        },
        created(){
            this.selectAllQD();
            this.selectByIdO();
        },
        methods: {
            selectByIdO(){
                axios.get(`/put/selectByIdOP?id=${sessionStorage.getItem('quoteId')}`)
                    .then(response => {
                        const mapData = response.data.data;
                        console.log(mapData);
                        this.demandList = mapData;
                        console.log(this.demandList);
                        this.Quantity = this.demandList.length;
                        for(const demand of this.demandList){
                            console.log(demand);
                            this.moneySum += demand.TOTAL_PRICE;
                            console.log('moneySum:',this.moneySum);
                            this.moneySum += demand.SUM_PRICE;
                            console.log('moneySum:',this.moneySum);
                        }
                    });
            },
            selectAllQD(){
                console.log('选择的ID为:',sessionStorage.getItem('quoteId'));
                axios.get(`/put/selectAllQD?id=${sessionStorage.getItem('quoteId')}`)
                    .then(response => {
                        const mapData = response.data.data;
                        this.quote = {
                            supplierName: mapData[0].QUO_COMPANY, // 北京华夏科技有限公司
                            supplierAddress: mapData[0].QUO_ADDRESS, // 北京市海淀区中关村大街1号
                            supplierContact: mapData[0].QUO_LINKMAN, // 张三
                            supplierPhone: mapData[0].QUO_PHONE, // 13800138000
                            supplierFax: mapData[0].QUO_FAX, // 010-12345678
                            supplierEmail: mapData[0].QUO_EMAIL, // zhangsan@huaxia.com
                            quoteTime: mapData[0].QUE_DATE, // 2023-10-01T00:00:00
                        };
                        this.quoteNum = mapData[0].QUOTE_NUM;
                        this.enquireId = mapData[0].ENQUIRE_ID;
                        this.queDate = mapData[0].QUE_DATE
                        this.quoRemark = mapData[0].QUO_REMARK;
                        this.findAllQU();
                    });
            },
            findAllQU(){
                axios.get(`/put/findAllQ?id=${this.enquireId}`)
                    .then(response => {
                        const mapData = response.data.data;
                        this.enquiry = {
                            company: mapData[0].COMPANY, // 北京华夏科技有限公司
                            address: mapData[0].ADDRESS, // 北京市海淀区中关村大街1号
                            contactPerson: mapData[0].LINKMAN, // 张三
                            phone: mapData[0].PHONE, // 13800138000
                            fax: mapData[0].FAX, // 010-12345678
                            email: mapData[0].EMAIL, // zhangsan@huaxia.com
                            enquiryTime: mapData[0].END_DATE,
                            enquiryNo: mapData[0].ENQUIRE_NUM,
                        };
                    })
                console.log('选择的ID为:',this.enquireId);
            },

            formatDate(date) {
                const d = new Date(date);
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                return `${year}/${month}/${day}`;
            },
            formatDateTime(dateTime) {
                const d = new Date(dateTime);
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                const hours = String(d.getHours()).padStart(2, '0');
                const minutes = String(d.getMinutes()).padStart(2, '0');
                const seconds = String(d.getSeconds()).padStart(2, '0');
                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            }
        }
    });
</SCRIPT>
</HTML>
